<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
	    <!-- Loading Bootstrap -->
	    <link href="./Public/Admin/Flat/dist/css/vendor/bootstrap.min.css" rel="stylesheet">
	    <!-- Loading Flat UI -->
	    <link href="./Public/Admin/Flat/dist/css/flat-ui.css" rel="stylesheet">
	    <link href="./Public/Admin/Flat/docs/assets/css/demo.css" rel="stylesheet">
	    <link rel="shortcut icon" href="./Public/Admin/Flat/img/favicon.ico">
	    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
	    <!--[if lt IE 9]>
	      <script src="dist/js/vendor/html5shiv.js"></script>
	      <script src="dist/js/vendor/respond.min.js"></script>
	    <![endif]-->
	    
	    <!--载入百度编辑器所需js文件-->
    	<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/ueditor.all.min.js"> </script>
		<script type="text/javascript" charset="utf-8" src="Public/Admin/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
		
		<!--上传插件所需文件-->
		<script type="text/javascript" src="Public/uploadify/jquery-1.8.2.min.js"></script>
    	<script type="text/javascript" src="Public/uploadify/jquery.uploadify.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="Public/uploadify/uploadify.css">
    		
    	<!--编辑的时候判断是否还有图片-->
    	
    		<script type="text/javascript">
    			//这里原来做文章的时候的a标签用的是id，因为上传的图片是一张。现在上传多张了，要换成class="close_img"
    			
    			//这时候新上传的图片不能关闭，因为上传用的是异步上传，页面没有刷新。所以click事件找不到当前。    所以要用函数
    			$(function(){
//  				$('.close_img').click(function(){
//  					$(this).parent('li').remove();
//  				})
    				//document是抓取页面上的东西
    				//抓取页面上class="close_img"的元素，并给他一个点击事件
    				$(document).on('click','.close_img',function(event){
    					$(this).parent('li').remove();
    				})
    			})


				//所以直接封装一个函数直接调用就OK了
//				 function delImg(obj){
//				 	$(obj).parent('li').remove();
//				 }
    		</script>
	</head>
	<body>
		<form action="" method="post" enctype="multipart/form-data">
			<div class="alert alert-success">修改商品</div>
			<div class="form-group">
				<label for="exampleInputEmail1">商品名</label>
				<input id="exampleInputEmail1" class="form-control" type="text" name="gname" value="{{$oldData['gname']}}">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail1">价格</label>
				<input id="exampleInputEmail1" class="form-control" type="text" name="price" value="{{$oldData['price']}}">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail1">所属分类</label>
				<select name="category_cid" class="form-control">
					{{foreach from="$cateData" value="$v"}}
					<option value="{{$v['cid']}}" {{if value="$oldData['category_cid'] eq $v['cid']"}}selected="selected"{{endif}} >{{$v['_name']}}</option>
				{{endforeach}}
				</select>
			</div>
			<div class="form-group">
				<label for="exampleInputEmail1">共参与期数</label>
				<input id="exampleInputEmail1" class="form-control" type="text" placeholder="点击次数" name="gnum" value="{{$oldData['gnum']}}">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail1">点击次数</label>
				<input id="exampleInputEmail1" class="form-control" type="text" name="clicks" value="{{$oldData['clicks']}}">
			</div>
			<div style="width:100%;float: left;" class="form-group">
				<label for="exampleInputEmail1">列表页图片</label>
				<input id="p" type="file" multiple="true">
				    <span style="display: block;float: left;font-size: 14px;">类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
				    <!--让上传的图片在这里显示出来-->
				    <div style="float: left;" id="picList">  
				    	<ul>
				    		
				    	</ul>
				    </div>
				    <script type="text/javascript">
				        $(function() {
				            $('#p').uploadify({
				                'formData'     : {//POST数据
				                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
				                },
				                'fileTypeDesc' : '上传文件',//上传描述
				                'fileTypeExts' : '*.jpg;*.png',
				                'swf'      : '{{__PUBLIC__}}/uploadify/uploadify.swf',      //（flash文件）目录也不能写错
				                'uploader' : '{{U('upload')}}',//指定服务器上传的方法（这个方法一定要写在控制器上）
				                'buttonText':'选择文件',
				                'fileSizeLimit' : '2000KB',
				                'uploadLimit' : 10,//上传文件数
				                'width':65,
				                'height':25,
				                'successTimeout':10,//等待服务器响应时间
				                'removeTimeout' : 0.2,//成功显示时间
				                'onUploadSuccess' : function(file, data, response) {
				                    //转为json
				                    data=$.parseJSON(data);
				                    //获得图片地址
				                    var imageUrl = data.url;
				                    var li="<li style='list-style:none;float:left;'>";
				                    li += "<img style='width:100px;' src='"+imageUrl+"'/>";
				                    //这个隐藏域是为了传递图片地址的。（以前只显示图片的文件名）
				                    li += "<input type='hidden' name='pic' value='"+data.path+"'/>";
				                    li += '<a onclick="delImg(this)" href="javascript:;" class="close_img">X</a>';
				                    li += "</li>";
				                    $("#picList ul").prepend(li); 
				                    //这个prepend（li）方法可以在页面组合多个li标签，所以上面创建了div，id=uploadList 的div ，让上传的图片显示出来
				                }
				            });
				        });
				    </script>
				    <div>
				    	<ul>
				    		<!--显示以前上传的图片-->
								<li style="list-style: none;float: left;">
									<img src="{{$oldData['pic']}}" style="width:100px;height: auto;" alt="" />
									<a onclick="delImg(this)" href="javascript:;" class="close_img">X</a>
									<input type="hidden" name="pic" value="{{$oldData['pic']}}" />
								</li>
				    	</ul>
				    </div>
			</div>
			
				<?php 
					//字符串转为数组
					$imgArr = explode(',', $oldData['img']);
					//sp($imgArr);
					
				 ?>
			
			<div style="width:100%;float: left;" class="form-group">
				<label for="exampleInputEmail1">商品图册</label>
				<input id="f" type="file" multiple="true">
				    <span style="display: block;float: left;font-size: 14px;">类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
				    <!--让上传的图片在这里显示出来-->
				    <div style="float: left;" id="uploadList">  
				    	<ul>
				    		
				    	</ul>
				    </div>
				    <script type="text/javascript">
				        $(function() {
				            $('#f').uploadify({
				                'formData'     : {//POST数据
				                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
				                },
				                'fileTypeDesc' : '上传文件',//上传描述
				                'fileTypeExts' : '*.jpg;*.png',
				                'swf'      : '{{__PUBLIC__}}/uploadify/uploadify.swf',      //（flash文件）目录也不能写错
				                'uploader' : '{{U('upload')}}',//指定服务器上传的方法（这个方法一定要写在控制器上）
				                'buttonText':'选择文件',
				                'fileSizeLimit' : '2000KB',
				                'uploadLimit' : 10,//上传文件数
				                'width':65,
				                'height':25,
				                'successTimeout':10,//等待服务器响应时间
				                'removeTimeout' : 0.2,//成功显示时间
				                'onUploadSuccess' : function(file, data, response) {
				                    //转为json
				                    data=$.parseJSON(data);
				                    //获得图片地址
				                    var imageUrl = data.url;
				                    var li="<li style='list-style:none;float:left;'>";
				                    li += "<img src='"+imageUrl+"' style='width:100px;'/>";
				                    //这个隐藏域是为了传递图片地址的。（以前只显示图片的文件名）
				                    li += "<input type='hidden' name='img[]' value='"+data.path+"'/>";
				                    li += '<a onclick="delImg(this)" href="javascript:;" class="close_img">X</a>';
				                    li += "</li>";
				                    $("#uploadList ul").prepend(li); 
				                    //这个prepend（li）方法可以在页面组合多个li标签，所以上面创建了div，id=uploadList 的div ，让上传的图片显示出来
				                }
				            });
				        });
				    </script>
			
			
					<div>
				    	<ul>
				    		<!--显示以前上传的图片-->
						{{foreach from="$imgArr" value="$v"}}
								<li style="list-style: none;float: left;">
									<img src="{{$v}}" style="width:100px;height: auto;" alt="" />
									<a onclick="delImg(this)" href="javascript:;" class="close_img">X</a>
									<input type="hidden" name="img[]" value="{{$v}}" />
								</li>
						{{endforeach}}
				    	</ul>
				    </div>
			
			</div>
			<div class="form-group" style="clear:both;">
				<label for="exampleInputEmail1">商品详情</label>
				<!-- 调用百度编辑器 -->
				<script id="editor" type="text/plain" style="width:100%;height:250px;" name="details">{{$oldData['details']}}</script>
				<script>
					var ue = UE.getEditor('editor');
				</script>
			</div>
		</div>
			<input type="hidden" name="gid" value="{{$_GET['gid']}}" />
			<button class="btn btn-primary btn-block" type="submit"> 确定 </button>
		</form>
	</body>
</html>
